 <template>
  <div>
       <el-button class="button" type="primary" @click="addShow(true)" >添加</el-button>
       <el-button type="danger"  @click="dell() ">批量删除</el-button>
      <TableList 
      :loading="loading"
      :tableData="tableData"
      :tableHead="tableHead"
      @moredelete ="dell"
      @stateChange="stateChange"
      @updateNotice="addShow"
      @deleteNotice ="del"
      @textView="textView"
      @multipleSelection="multipleSelection"
      />
      <NoticeDialog 
      :titleFlag="titleFlag"
      :show="showDialog"
      :updateData="updateData"
      @close="addShow"
      />
    </div>
</template>

<script>
import http from './../api/notice'
import TableList from './Table.vue'
import NoticeDialog from './NoticeDialog.vue'
    export default {
        components: {
          TableList,
          NoticeDialog
        },
        data () {
          return {
            
            showDialog: false,
            updateData: {},
            titleFlag: false,
            multipleSelectionArr: [],
            loading: false,
            tableData: [
            ],
            tableHead: [
              {
                label: 'ID',
                prop: 'id'
              },
              {
                label: '类型',
                prop: 'typename',
                type: 'isclick'
              },
              {
                label: '公告标题',
                prop: 'title'
              },
              {
                label:'图片',
                prop: 'picture',
                type: 'img',
                 formatter: (row, prop) => { 
                  let baseUrl = this.$config.baseUrl+'/upload/'
                  let imgUrl = !prop ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi10.hoopchina.com.cn%2Fhupuapp%2Fbbs%2F553%2F109014225789553%2Fthread_109014225789553_20190509195606_s_315149_w_320_h_320_842.gif&refer=http%3A%2F%2Fi10.hoopchina.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648777377&t=90e3ead1d7a1ced6e75fbd41fbc89139' : baseUrl+prop
                  return imgUrl
          }
                },
                 {
                label: '状态',
                prop: 'state',
                type: 'switch'
              },
                {
                label: '发布时间',
                prop: 'addtime'       
              },
              {
                label: '发布人',
                prop: 'edituser',
                isclick:true          
              },
               {
                label: '操作',
                type: 'button',
                button: {
                  update: true,
                  detele: true
                }
              },
            ]
          }
        },
        mounted () {
          this.getNoticeList()
        },
        methods: {
          /**
           * 显示 隐藏 操作->[添加/修改/关闭/取消/确定]
           * @param show Boolean 显示 隐藏
           * @param data Object  修改时的数据
           * @param flag Number  控制列表渲染的标识
           */
          async addShow (show, data, flag) {
            this.showDialog = show
            console.log(show, data, flag)
            if (show) {
              this.titleFlag = !!data
              if (this.titleFlag) {
                // 拿到当前data.id 去查询当前行的数据
                const res = await http.noticeSingle({id:data.id})
                // 给updateData赋值代表需要回填的数据
                this.updateData = res.data

              }
            } else {
              flag && await this.getNoticeList()
              this.updateData = {}
            }
          },
          multipleSelection (data) {
            this.multipleSelectionArr = data
          },
          stateChange(data) {
            console.log('stateChange', data)
          },

          //批量
          dell(){
            let ids=this.multipleSelection
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        http.noticeDeleteall({ids}).then((res)=>{
            console.log(11)
            if(res.errCode==10000){
              this.getNoticeList()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          },
          //单删
          del(data) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               http.noticeDelete({id:data.id}).then((res)=>{
                if(res.errCode==10000){
                  console.log(res);
                  
                this.getNoticeList()
                }
                })
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
            
          },
           textView (data) {
            console.log('textView', data)
          },
  
         async getNoticeList() {
          //  console.log('list')
           const { data } = await http.noticeList()
           this.tableData = data.list
          }
        }
    }
</script>

<style lang="less" scoped>

</style>